import React, { useState,useEffect } from 'react'
import { SideBar } from 'antd-mobile'
import Header from '../../components/Header/Header'
import { Link } from 'react-router-dom'
import { $pre } from '../../http/http'
import "./Cate.less"
import { reqgetcate, reqgetgoods } from '../../http/api'


const Cate = () => {
  const [cate, setCate] = useState([])
  const [goods, setGoods] = useState([])

  useEffect(() => {
    reqgetcate().then(res=>{
      if(res.data.code===200){
        setCate(res.data.list)
      }
    })
    reqGoods()
  }, [])
  const reqGoods = (fid=1) =>{
    reqgetgoods({fid}).then(res=>{
      if(res.data.code===200){
        setGoods(res.data.list)
      }
    })

  }

  return (
    <div className='cate'>
      <Header title="商品分类" back></Header>
      <SideBar defaultActiveKey="1" onChange={v => reqGoods(v)}>
        {cate.map(item => (
          <SideBar.Item key={item.id} title={item.catename} />
        ))}
      </SideBar>
      <ul className='goods'>
        {
          goods.map(item => {
            return (
              <Link key={item.id} to={"/detail/" + item.id}>
                <li>
                  <img src={$pre + item.img} alt="" />
                  <h3>{item.goodsname}</h3>
                  <p>￥<span>{item.price}</span></p>
                  <del>￥{item.market_price}</del>
                </li>
              </Link>
            )
          })
        }
      </ul>
    </div>
  )
}


export default Cate